<template>
  <div class="common-layout">
    <el-container>
      <el-header class="user">
        <p>BIG CUTE</p>
        
        <p> <img :src="img" alt="" class="tou">
          <el-button type="primary" round @click="out">退出</el-button>
        </p>
       

      </el-header>

      <el-container>
        <el-aside width="200px">

          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :value="false">显示</el-radio-button>
            <el-radio-button :value="true">隐藏</el-radio-button>
          </el-radio-group>
          <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose" :router="true">
            <el-sub-menu v-for="(item, index) in tree" :key="index" :index="item.id + ''">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <RouterLink :to="item.path">{{ item.name }}</RouterLink>
              </template>
              <el-menu-item-group>

                <el-menu-item v-for="(v, i) in item.children" :key="i" :index="item.id + ''" :route="{ path: v.path }">{{
                  v.name
                  }}</el-menu-item>

              </el-menu-item-group>

            </el-sub-menu>

          </el-menu>

        </el-aside>
        <el-main>
          <div style="margin-bottom:10px ;">
            <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
              <a href="/screen/employment">大屏管理</a>
            </el-breadcrumb-item>
           
          </el-breadcrumb>
          </div>
          
          
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>


</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { RouterLink,useRouter } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import buildTree from '../utils/Tree';

const router = useRouter()


let leftMenu = reactive(localStorage.getItem('auths') ? JSON.parse(localStorage.getItem('auths')) : [])
// console.log(leftMenu, '菜单')

const tree = buildTree(leftMenu);
// console.log(tree, '树形');

const img = reactive(localStorage.getItem('image'))
// console.log(img, 'img')

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}

// 退出
const out=()=>{
  localStorage.removeItem('token')
  localStorage.removeItem('auths')
  localStorage.removeItem('image')
  router.push('/login')
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.user {
  display: flex;
  /* background-color: pink; */
  justify-content: space-between;
  align-items: center;
}

.tou {
  width: 50px;
  height: 50px;
}
</style>
